<template>
  <div title="头部">
      <el-row class="tmsHeaderContainer">
            <el-col class="tmsTitle">万事达-TMS <span>{{tmsheader.tmsBigTitle}}</span></el-col>
      </el-row>
      <div class="tmsSonTitle">
      <div>{{tmsheader.tmsATitle}}-<span>{{tmsheader.tmsBTitle}}</span></div>
      <div><el-button class="exitBtn" type="text" @click="tmsExit()" round>退出</el-button></div>
      </div>   
  </div>
</template>

<script>
export default {
 name: "TmsHeader",
  data () {
    return {
    };
  },
  //父组件传递过来头部的属性
  props:['tmsheader'], 

  methods:{
    tmsExit(){
       this.$confirm('是否确认登出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'warning',
            message: '登出成功!'
          });
          this.$router.push('/')
        }).catch(()=>{
          console.log('取消成功');
        })
    }
  }
}

</script>
<style scoped lang="less">

 .tmsHeaderContainer{
     
    font-weight: bold;
    color: white;
    .tmsTitle{
    padding-left:10px;
    height: 50px;
    font-size: 40px;
   background-color: #909399;
    line-height: 50px;
    text-align: left;
    color: currentColor;
    }
}
  .tmsSonTitle{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding:0px 10px;
    border-top: 2px solid white;
    background-color: #E4E4E4;
    height: 60px;
    font-size: 30px;
    color: currentColor;
    line-height: 50px;
    .el-button{
        display: flex;
        align-items: center;
      
    }

    }
 span{
     color: #F56C6C;
    }
    .exitBtn{
      color: red;
      border: 2px solid white;
      font-weight: 600;
    }
  
   .el-button--text:focus{
      color: red;
      border: 2px solid white;
      font-weight: 600;
    }

    .el-button--text:hover{
      color: white;
       border: 2px solid red;
      font-weight: 600;
    }
   
</style>